<template>
	<view class="container">
		<view class="detail">
			<image :src="detail.Avatar" style="width: 60px; height: 60px"></image>
			<text class="list-text"> &nbsp; {{ detail.Phone }} </text>
			<text class="online">在线</text>
		</view>
		<view class="historyMsg">
			<text>{{ historymsg }}</text>
		</view>
		<view><input type="hidden" v-model="to_id" value="{{to_id}}"/></view>
		<view class="editMsg"><textarea v-model="editmsg" placeholder="输入聊天信息"></textarea></view>
		<button @click="sendMessage">发送</button>
	</view>
</template>

<script>
	import { ref, onMounted, onUnmounted } from 'vue';
	const message = ref('');
	const ws = ref(null);
	const jsloguser = JSON.parse(uni.getStorageSync('jsloguser'));
	export default {
		data() {
			return {
				detail:{
					Avatar:'',
					Username:'',
					Nickname:'',
					Realname:'',
					Sex:'',
					Age:'',
					Phone:'',
					Email:'',
					Lastlogintime:'',
				},
				editmsg:'',
				to_id:'',
				historymsg:'',
			}
		},
		onLoad(options) {
			this.connect()
			this.to_id = options.friend_id
			this.friendetail(options.friend_id);
			//this.msg(options.friend_id);
		},
		methods: {

			friendetail(friend_id){
				let that = this	
				if(jsloguser){
					uni.request({
					    url: that.$host+'/apiv/v1/friend/friend_detail', // 你的API接口地址
					    method: 'POST',
						header:{'content-type':'application/x-www-form-urlencoded;charset=utf-8','Token':jsloguser.token},
					    data: {friend_id:friend_id},
					    success: (res) => {
							if(res.data.code == 200){
								this.detail = res.data.data.UserList
							}else{
								alert(res.data.msg)
							}
					    },
					    fail: (err) => {
							alert(err)
					    }
					});
				}
			},
			// 连接WebSocket服务器 
			connect() {
				let that = this
				ws.value = new WebSocket('ws://'+that.$hostim+'/ws/v1/chat/chat?token='+jsloguser.token);
				ws.value.onopen = function(event) {
					console.log('WebSocket 连接已打开', event);
				};
			 
				ws.value.onerror = function(error) {
					console.error('WebSocket 出错', error);
				};
			 
				ws.value.onmessage = function(event) {
					
					that.historymsg += event.data+"\n";
					console.log('收到消息: ', event.data);
				};
			
				ws.value.onclose = function(e) {
					console.error('websocket 断开');
					console.log('错误码:'+e.code + '; 内容:' + e.reason + '; 其它:' + e.wasClean);
				};
			},
			disconnect() {
				if (ws.value) {
					ws.value.close();
				}
			},
			sendMessage() {
				let that = this
				if (!this.editmsg|| this.editmsg == null || this.editmsg==undefined || this.editmsg=='undefined') {
					alert('聊天内容 不能为空');
					return
				}
				
				if (!this.to_id|| this.to_id == null || this.to_id==undefined || this.to_id=='undefined') {
					alert('接收者ID 不能为空');
					return
				}
				if (ws.value) {
					ws.value.send('{"from_id":'+jsloguser.id+',"to_id":'+this.to_id+',"content":"'+this.editmsg+'","uid":'+jsloguser.id+'}');
				}
			},
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	height: 100%; /* 确保父容器的高度为整个屏幕的高度 */
	/* justify-content: space-between; /* 使得view分散对待 */
  }
.detail{
	display: flex;
	align-items: center; /* 垂直居中 */
	margin-bottom: 10px; /* 列表项之间的间隔 */
	background:cornflowerblue;
	padding-left: 2%;
}
.historyMsg{
	/* flex: 1; /* 这将使.content占据所有可用空间 */
	    /* 或者可以指定具体的百分比，例如：
	    height: 50%; */
	border: 1px solid #000000; border-radius: 5px;
	height: 300px;
	/* height: 80%; */
}
.editMsg{
	border: 1px solid #000000; border-radius: 5px;
	/* float: bottom; */
	/* margin-top: 100%; */
	flex: 1;
}
.inputText{
	height: 150rpx;
}
.online{
	background-color: green;
	text-align: right;
}
</style>
